<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		html, body {
			width: 100%;
			height: 100%;
		}
		.container {
			background-color: #eee;
			position: relative;
			/* 保持宽高比 */
			width: 100vw;
			aspect-ratio: 16 / 9;
			/* 单位替换为rem */
		}
		.div1 {
			position: absolute;
			width: 10rem;
			height: 10rem;
			background-color: cadetblue;
			top: 5rem;
			left: 4rem;
		}
		.div2 {
			position: absolute;
			width: 50rem;
			height: 50rem;
			background-color: pink;
			top: 10rem;
			left: 40rem;
		}
		.div3 {
			position: absolute;
			width: 20rem;
			height: 20rem;
			background-color: darkseagreen;
			top: 13rem;
			left: 96rem;
		}
	</style>
	<body>
		<div class="container">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
		</div>
		<script>
			setFontSize()
			function setFontSize(){
			    const designWidth = 1920;//设计稿的宽度，根据实际项目调整
			    const designHeight = 1080;//设计稿的高度，根据实际项目调整
				/**
				 * 通过比较页面宽高比与设计稿宽高比的大小关系，选择合适的计算方式： 
				 * > 如果页面宽高比小于设计稿宽高比，则使用 (document.documentElement.clientWidth / designWidth) * 12 计算字体大小。
				 * > 如果页面宽高比大于等于设计稿宽高比，则使用 (document.documentElement.clientHeight / designHeight) * 12 计算字体大小。
				 * 保持屏幕一直是最大可视化的效果
				 */
			    let fontSize = 
			        document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight ? 
			        (document.documentElement.clientWidth / designWidth) * 12:
			        (document.documentElement.clientHeight / designHeight) * 12;
			    document.querySelector('html').style.fontSize = fontSize + 'px';
			}
			window.onresize = function () {
			    setFontSize()
			};
		</script>
	</body>
</html>